
.fastestRow div {
    background-color: lightgreen;
}

.card {
    background-color: #ffffff;
    margin-bottom: 8px;
    padding: 15px;
}

#runAllButton {
    width: 100px;
    height: 50px;
    margin-bottom: 15px;
}

#runAllButton_lexer {
    width: 100px;
    height: 50px;
    margin-bottom: 15px;
}

#runAllButton_parser {
    width: 100px;
    height: 50px;
    margin-bottom: 15px;
}

/*
 style the stuff as if they were a table.
 allow for position relative/absolute for sorting and transforms.
 */
#resultsContainer {
    text-align: center;
}

#dataRows {
    position: relative;
}

.headerRow, .dataRow {
    margin: 0;
    padding: 0;
    width: 100%;
}

.headerRow div, .dataRow > div {
    margin: 0;
    margin-left: -2px;
    margin-right: -2px;
    display: inline-block;
    height: 100%;
    border: 1px solid black;
    border-left: none;
}

.dataRow div {
    border-top: none;
}

.headerRow {
    height: 70px;
}

.headerRow div {
    font-size: 1.5em;
    background-color: darkgreen;
    color: white;
    /* This will hopefully resolve text cutoff issues on Android*/
    line-height: 62px;
}

.headerRow .benchRate, .headerRow .benchSpeed, .headerRow .benchInclude {
    text-align: center;
}

.dataRow {
    height: 50px;
    background-color: white;
    position: absolute;
    top: 0;
    transition: all 1s ease-in-out;
}

.dataRow > div {
    font-size: 1em;
    overflow: hidden;
}

.benchName, .benchRate, .benchSpeed, .benchInclude {
}

div.benchName {
    width: 175px;
    padding-right: 10px;
    border-left: 1px solid black;
}

.benchRate {
    width: 125px;
}

.benchSpeed {
    width: 175px;
}

div.benchInclude {
    width: 50px;
}

.dataRow .benchRate {
    padding-top: 5px;
}

.benchRate, .benchSpeed, .benchInclude, .benchName {
    text-align: center;
}

.benchRate .value {
    font-weight: bold;
}

.benchRate .delta {
    font-size: .75em;
}

/* for animating the table sort change. adapted from:
   http://blog.stevensanderson.com/2013/03/15/animating-lists-with-css-3-transitions/
   Basically, we freeze the styles, then sort the elements, then unfreeze the styles
   and these rules then tell each element where they should be based on the order
   they are in as elements.
   Also, the z-index makes ones moving higher in the list show in front of the
   others as they move up.
*/

#dataRows div.dataRow:nth-child(1) {
    transform: translate3d(0, 0, 0);
    z-index: 100;
}

#dataRows div.dataRow:nth-child(2) {
    transform: translate3d(0, 100%, 0);
    z-index: 99;
}

#dataRows div.dataRow:nth-child(3) {
    transform: translate3d(0, 200%, 0);
    z-index: 98;
}

#dataRows div.dataRow:nth-child(4) {
    transform: translate3d(0, 300%, 0);
    z-index: 97;
}

#dataRows div.dataRow:nth-child(5) {
    transform: translate3d(0, 400%, 0);
    z-index: 96;
}

#dataRows div.dataRow:nth-child(6) {
    transform: translate3d(0, 500%, 0);
    z-index: 95;
}

#dataRows div.dataRow:nth-child(7) {
    transform: translate3d(0, 600%, 0);
    z-index: 94;
}

#dataRows div.dataRow:nth-child(8) {
    transform: translate3d(0, 700%, 0);
    z-index: 93;
}

#dataRows div.dataRow:nth-child(9) {
    transform: translate3d(0, 800%, 0);
    z-index: 92;
}

#dataRows div.dataRow:nth-child(10) {
    transform: translate3d(0, 900%, 0);
    z-index: 91;
}

#dataRows div.dataRow:nth-child(11) {
    transform: translate3d(0, 1000%, 0);
    z-index: 90;
}

#dataRows div.dataRow:nth-child(12) {
    transform: translate3d(0, 1100%, 0);
    z-index: 89;
}



/*bootstrap customization*/
@media (min-width: 1200px) {
    .container{
        width: 98%;
    }
}


